// login.vue
<template>
  <div class="wrapper">
    <div class="login-box clearfix">
      <div class="inline-block welcome-box fl">
        <div class="welcome">欢迎使用</div>
        <div class="project">小青书后台管理系统</div>
        <img class="block img" src="@/assets/login/welcome@2x.png" />
      </div>
      <div class="inline-block form-box fr">
        <img class="block heima-img" src="@/assets/login/logo_littletsingbook.png" />
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="login-form">
          <el-form-item class="input-label name-input-label">用户名 / user name</el-form-item>
          <el-form-item prop="name" class="name-input-box">
            <el-input type="text" v-model="ruleForm.name" autocomplete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="input-label password-input-label">密码 / password</el-form-item>
          <el-form-item prop="password" class="password-input-box">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item prop="signAgreement" class="signagreement-input-box">
            <el-checkbox v-model="ruleForm.signAgreement">我已阅读并同意用户协议和隐私条款</el-checkbox>
          </el-form-item>
          <el-form-item class="loginBtn" :class="validateState ? 'enabled' : ''">
            <el-button :disabled="!validateState" @click="submitForm('ruleForm')">登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { loginByUsername } from '@/api/login'
import { setToken } from '@/utils/auth'
export default {
  data() {
    var validateSignAgreement = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请阅读并同意协议'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        name: 'admin',
        password: '123456',
        signAgreement: true
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
        signAgreement: [
          { validator: validateSignAgreement, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    validateState() {
      debugger
      return this.ruleForm.name !== '' && this.ruleForm.password !== '' && this.ruleForm.signAgreement
    }
  },
  methods: {
    async submitForm() {
      debugger
      try {
        await this.$refs.ruleForm.validate()
        const { password, name } = this.ruleForm

        const res = await loginByUsername(name, password)

        if (res.code === 200) {
          // 在登录成功后手动将 token 存储在 cookie 中
          setToken(res.data.token)

          // 调用 login action 获取用户信息
          this.$store.dispatch('user/login', { name: name, password: password })

          // 跳转到目标页面
          // 用name来指定目标页面
          // this.$router.push({ name: this.$route.query.redirect || '/' });

          this.$router.push({ path: this.redirect || '/' })
        } else {
          console.log(res.errorMessage)
          this.$message({
            message: res.errorMessage,
            type: 'error'
          })
        }
      } catch (err) {
        console.log('错误: ' + err)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// TODO: 颜色按照规范调整
.wrapper {
  background-image: url('~@/assets/login/login_bg@2x.png');
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-box {
    display: flex;
    width: 1070px;
    height: 594px;
    background: #FFFFFF;
    box-shadow: 0px 0px 40px 20px rgba(16, 30, 134, 0.17);
    border-radius: 18px;

    .welcome-box {
      width: 642px;
      height: 594px;
      padding-left: 121px;
      box-sizing: border-box;
      background: #EEF4FF;
      border-radius: 18px 0px 0px 18px;

      .welcome {
        height: 56px;
        margin-top: 52px;
        font-size: 40px;
        font-family: PingFangSC-Thin, PingFang SC;
        font-weight: 100;
        color: #474849;
        line-height: 56px;
      }

      .project {
        height: 56px;
        margin-top: 10px;
        font-size: 40px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgb(37, 196, 167);
        line-height: 56px;
      }

      .img {
        width: 305px;
        height: 305px;
        margin-top: 45px;
      }
    }

    .form-box {
      width: 428px;
      height: 594px;
      background: #FFFFFF;
      border-radius: 0px 18px 18px 0px;

      .heima-img {
        width: 141px;
        height: 101px;
        margin: 6px auto 0;
        margin-left: 140px;
      }

      .login-form {
        width: 300px;
        margin: 0 auto;
        text-align: center;

        .input-label {
          ::v-deep .el-form-item__content {
            font-size: 16px;
            font-weight: 400;
            color: #BAC0CD;
            line-height: 22px;
          }
        }

        .name-input-label {
          margin-top: 44px;
        }

        .name-input-box {
          margin-top: 13px;
        }

        .password-input-label {
          margin-top: 24px;
        }

        .password-input-box {
          margin-top: 13px;
        }

        .signagreement-input-box {
          margin-top: 40px;

          ::v-deep .el-form-item__content {
            line-height: 20px;
          }

          ::v-deep .el-checkbox__label {
            height: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #BAC0CD;
            line-height: 20px;
          }
        }

        ::v-deep .el-input__inner {
          width: 300px;
          height: 50px;
          background: #F3F4F7;
          border-radius: 30px;
          border: 1px solid #D5E6FF;
          text-align: center;
          line-height: 48px;
        }

        ::v-deep .el-form-item .el-input__inner:hover,
        ::v-deep .el-form-item .el-input__inner:focus {
          border-color: rgb(37, 196, 167);
        }

        ::v-deep .el-form-item.is-error .el-input__inner {
          border-color: #FF5C5C;
        }

        .loginBtn {
          ::v-deep .el-button {
            width: 300px;
            height: 60px;
            margin-top: 18px;
            background: #BFD0F2;
            border-radius: 30px;
            font-size: 18px;
            font-weight: 400;
            color: #FFFFFF;
          }
        }

        .enabled {
          ::v-deep .el-button {
            background: rgb(37, 196, 167);
          }
        }

        ::v-deep .el-form-item__error {
          width: 100%;
        }
      }
    }
  }
}
</style>
